<template>
	<view class="warranty-detail">
		<view class="warranty-detail-wrap">
			<image class="header-img" src="/static/images/1_r1_c1.jpg"></image>
			
			<view class="content">
				<view class="content-cell">
					<view class="content-cell-label space-10">订单号</view>
					<view class="content-cell-label">：</view>
					<view class="content-cell-control">{{warrantyInfo.mainOrderInfo.sourceTradeNos}}</view>
				</view>
				<view class="content-cell">
					<view class="content-cell-label">商品数量：</view>
					<view class="content-cell-control">{{Number(warrantyInfo.mainOrderInfo.tradeCount).toFixed(0)}}</view>
				</view>
				<view class="content-cell">
					<view class="content-cell-label">购买时间：</view>
					<view class="content-cell-control">{{warrantyInfo.mainOrderInfo.tradeTime}}</view>
				</view>
				<view class="content-cell">
					<view class="content-cell-label space-10">购买</view>
					<view class="content-cell-label space-4">ID：</view>
					<view class="content-cell-control">{{warrantyInfo.mainOrderInfo.tradeNo}}</view>
				</view>
				<view class="content-cell">
					<view class="content-cell-label">购买渠道：</view>
					<view class="content-cell-control">{{warrantyInfo.mainOrderInfo.shopName}}</view>
				</view>
			</view>
			
			<view class="goods-list">
				<view class="header-title">商品明细</view>
				<view class="goods-list-title">
					<view class="fitst-cell">序号</view>
					<view class="second-cell">商品编码</view>
					<view class="third-cell">商品名称</view>
					<view class="fourth-cell">数量</view>
					<view class="action-cell">操作</view>
				</view>
				<view class="goods-list-cell" v-for="(item,index) in warrantyInfo.subOrderInfo" :key="item.goodsNo">
					<view class="fitst-cell">{{index + 1}}</view>
					<view class="second-cell">{{item.goodsNo}}</view>
					<view class="third-cell">{{item.goodsName}}</view>
					<view class="fourth-cell">{{item.sellCount}}</view>
					<view class="action-cell">
						<button class="get-btn" v-if="item.isGet === 0" v-on:click="handleWarrantyCertificate(item.serialNo)">领取质保单</button>
						<button class="get-btn disabled" v-if="item.isGet === 1" v-on:click="gotoSerialDetail(item.serialNo)">查看质保单</button>
						<button class="get-btn disabled" v-if="item.isGet === 2">已退款</button>
					</view>
				</view>
			</view>
			
			<view class="rich-ad" v-if="is_show">
				<!-- <rich-text :nodes="adNode"></rich-text> -->
				<mp-html :content="adNode" container-style="width: 680rpx;" :tag-style="{img: 'width:100%;', video: 'width:100%;'}" />
			</view>
			
			<image class="footer-img" src="/static/images/1_r7_c2.jpg"></image>
		</view>
		
		<view class="customer-icon" @tap="goGoodCall">
			<text class="iconfont icon-ic_customerservice fs-40"></text>
			<text class="fs-18">客服</text>
		</view>
		<view class="goback-icon" @tap="goTop">
			<text class="iconfont icon-ic_up2 fs-40"></text>
			<text class="fs-18">置顶</text>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from "vuex";
	import { toLogin } from '@/libs/login.js';
	import { getOrderByOrderNo, getWarrantyCertificate } from "@/api/warranty.js";
	import { getAdDetail } from '@/api/unicode.js';
	export default {
		name: "WarrantySearch",
		data() {
			return {
				adNode: "",
				is_show: 0,
				sourceTradeNos: undefined,
				warrantyInfo: {
					mainOrderInfo: {},
					subOrderInfo: []
				}
			};
		},
		computed: {
		  ...mapGetters({
		    isLogin: 'isLogin'
		  })
		},
		mounted() {
			this.getNode();
		},
		onLoad(options) {
			const sourceTradeNos = options?.sourceTradeNos;
			
			if(sourceTradeNos) {
				this.sourceTradeNos = sourceTradeNos;
			}
		},
		onShow() {
			if(this.isLogin === false) {
				toLogin();
			} else if(this.sourceTradeNos) {
				this.init(this.sourceTradeNos)
			}
		},
		methods: {
			goTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
			},
			goGoodCall() {
				let userInfo = uni.getStorage("USER_INFO")
				// let url = `/pages/extension/customer_list/chat?productId=${this.id}`
				// let obj = {
				// 	store_name: this.storeInfo.store_name,
				// 	path: `/pages/goods_details/index?id=${this.storeInfo.id}`,
				// 	image:this.storeInfo.image
				// }
				this.$util.getCustomer(userInfo, null, null, 0)
			},
			getNode() {
				getAdDetail({id: 5}).then((res) => {
					if(res?.status === 200 && res?.data) {
						this.adNode = res?.data?.content;
						this.is_show = res?.data?.is_show;
					}
				}).catch((msg) => {
					this.is_show = 0;
				});
			},
			gotoSerialDetail(serialNo) {
				if(this.isLogin === false) {
					toLogin();
				} else {
					uni.navigateTo({
						url:"/pages/warranty/result?serialId=" + serialNo
					})
				}
			},
			init(sourceTradeNos) {
				getOrderByOrderNo({sourceTradeNos}).then((res) => {
					if(res?.status === 200 && res?.data) {
						this.warrantyInfo = {
							mainOrderInfo: res.data.mainOrderInfo[0],
							subOrderInfo: res.data.subOrderInfo
						};
					} else {
						uni.showToast({
							icon: 'error',
							title: "订单号无效！"
						})
					}
				}).catch((msg) => {
					uni.showToast({
						icon: 'error',
						title: msg && typeof msg === "string" ? msg : "订单号无效！"
					})
				});
			},
			handleWarrantyCertificate(serialNo) {
				if(this.isLogin === false) {
					toLogin();
				} else {
					getWarrantyCertificate({serialNo}).then((res) => {
						if(res?.status === 200) {
							uni.showToast({
								title: "领取成功！"
							}).then(() => {
								uni.navigateTo({
									url:"/pages/warranty/result?serialId=" + serialNo
								})
							})
						} else {
							uni.showToast({
								icon: 'error',
								title: "领取失败！"
							})
						}
					}).catch((msg) => {
						uni.showToast({
							icon: 'error',
							title: msg && typeof msg === "string" ? msg : "领取失败！"
						})
					});
				}
			},
		}
	};
</script>

<style scoped lang="scss">
	.rich-ad {
		margin: 40rpx;
	}
	.warranty-detail {
		background-color: #86151a !important;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		
		.warranty-detail-wrap {
			min-height: 100vh;
			background: url("@/static/images/1_r3_c1.jpg");
			background-size: contain;
			padding-bottom: 50rpx;
			border-bottom: 16rpx solid #86151a;
		}
		
		.header-img {
			height: 168rpx;
			width: 750rpx;
		}
		
		.space-10 {
			letter-spacing: 10rpx;
		}
		
		.space-4 {
			letter-spacing: 4rpx;
		}
		
		.content {
			padding: 60rpx 60rpx 0;
			
			&-cell {
				display: flex;
				align-items: center;
				line-height: 84rpx;
				border-bottom: 1rpx dashed #ddd;
				
				&-label {
					color: #666;
					font-weight: 200;
				}
				
				&-control {
					color: #86151a;
				}
			}
		}
		
		.goods-list {
			position: relative;
			border: 1rpx solid #86151a;
			margin: 80rpx 40rpx;
			border-radius: 4rpx;
			padding: 40rpx 0 20rpx;
			
			.header-title {
				position: absolute;
				top: -28rpx;
				left: 243rpx;
				font-size: 28rpx;
				padding: 4rpx 36rpx;
				color: #fff;
				font-weight: 200;
				border-radius: 4rpx;
				background-color: #86151a;
			}
			.goods-list-title, .goods-list-cell {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 12rpx 16rpx;
				text-align: center;
				font-size: 24rpx;
				font-weight: 200;
			}
			
			>view {
				word-wrap:break-word;
			}
			
			.fitst-cell {
				width: 60rpx;
			}
			
			.second-cell {
				width: 100rpx;
			}
			
			.third-cell {
				flex: 1;
			}
			
			.fourth-cell {
				width: 60rpx;
			}
			
			.action-cell {
				width: 150rpx;
			}
			
			.get-btn {
				color: #fff;
				width: 146rpx;
				margin: 0 auto;
				border-radius: 4rpx;
				font-size: 24rpx;
				font-weight: 200;
				padding: 4rpx 8rpx;
				border: 2rpx solid #86151a;
				background-color: #86151a;
				
				&.disabled {
					border: 2rpx solid #adacac;
					background-color: #adacac;
				}
			}
		}
		
		.footer-img {
			display: block;
			height: 564rpx;
			width: 650rpx;
			margin: 80rpx auto 0;
		}
	}
	
	.customer-icon {
		position: fixed;
		bottom: 280rpx;
		right: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: #fff;
		box-shadow: 0 0 6rpx #750c1082;
		width: 100rpx;
		height: 100rpx;
		color: #fff;
		background-color: #750c1082;
		border-radius: 50%;
		margin-bottom: constant( safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
		margin-bottom: env( safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
	}
	.goback-icon {
		position: fixed;
		bottom: 160rpx;
		right: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: #fff;
		box-shadow: 0 0 6rpx #750c1082;
		width: 100rpx;
		height: 100rpx;
		color: #fff;
		background-color: #750c1082;
		border-radius: 50%;
		margin-bottom: constant( safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
		margin-bottom: env( safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
	}
</style>